<template>
	<view class="" v-if="wallpaper.length>0">
		<view class="album_bg">
			<image :src="album.cover" mode="aspectFill"></image>
			<view class="album_wz">
				<view class="album_name">
					{{album.name}}
				</view>
				<view class="album_btn">
					关注专辑
				</view>
			</view>
		</view>
		<view class="album_author">
			<view class="album_author_name">
			 
					<image :src="album.user.avatar" mode="aspectFill"></image>
				    <view class="author_name">
				    	{{album.user.name}}
				    </view>
				 
			</view>
			<view class="album_ct">
				<text>{{album.desc}}</text>
			</view>
		</view>
		<view class="album_list">
			<view class="album_item" v-for="(item,index) in wallpaper" :key="item.id">
				<go-detail :list="wallpaper" :index="index" >
					
					<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</go-detail>
				
			</view>
		</view>
	</view>
</template>

<script>
	import goDetail from "@/components/goDetail.vue"
	export default{
		components:{
			goDetail
		},
		data() {
			return {
			 params:{
				 limit:30,
				 order:"new",
				 skip:0,
				 first:1,
				 hasmore:true
			 },
			 id:-1,
			 album:{},
			 wallpaper:[]
			}
		},
		onLoad(e) {
			console.log(e)
			this.id=e.id
			this.getlist()
		},
		// 页面触底
		onReachBottom() {
			if(this.hasmore){
				this.params.skip+=this.params.limit
				this.getlist()
			}else{
				uni.showToast({
					title:"到底了",
					icon:"none"
				})
			}
			
		},
		methods:{
			getlist(){
				this.request({
					url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
					data:this.params
						
					
				}).then(res=>{
					console.log(res.data.res.wallpaper)
				 
					this.album=res.data.res.album
					if(res.data.res.wallpaper===0){
						this.hasmore=false
						
						uni.showToast({
							title:"没有数据了",
							icon:"none"
						})
						return
					}
					this.wallpaper=[...this.wallpaper,...res.data.res.wallpaper]
				})
			}
		}
	}
</script>

<style scoped>
	.album_bg{
		position: relative;
	}
	.album_bg image{
		width: 100%;
		height: 420rpx;
	}
	.album_wz{
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content:space-between;
		height: 80rpx;
		align-items: center;
		color: #FFFFFF;
		padding: 0 15rpx;
		text-align: center;
	}
	.album_name{
		font-size: 40rpx;
		margin-left: 5%;
	}
	.album_btn{
		background-color: #4CD964;
		width: 152rpx;
		height: 50rpx;
	    justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-right: 2%;
	}
	.album_author_name{
		display: flex;
		
	}
	.album_author_name image{
		width: 80rpx;
		height: 80rpx;
	}
	.album_author{
		padding: 10rpx;
	}
	 .author_name{
		 color: #000000;
		 margin-left: 3%;
		 justify-items: center;
		 text-align: center;
		 align-items: center;
		 line-height: 85rpx;
	 }
	 .album_ct{
		 margin-top: 2%;
		 margin-left: 3%;
	 }
	 .album_list{
		 display: flex;
		 flex-wrap: wrap;
		 margin-left: 1%;
	 }
	 .album_item{
		 width: 32.33%;
		 border: 3rpx solid #FFFFFF;
	 }
	 .album_item image{
		 width: 100%;
		 height: 220rpx;
		 
	 }
</style>
